<template>
	<view class="Global">
		<bgImage></bgImage>

		<view class="title">{{title}}</view>
		<view class="content">个人或小型作坊可为多家工厂提供服务，员工 先注册，再扫如下工厂码加入工厂，切换工厂 后即可登记该工厂的订单数据</view>




		<view>


			<!-- 点击列表弹出-->
			<uni-popup ref="popupBag" type="bottom">
				<view class="bagDetail">

					<view class="bagDetailTitle">温馨提示</view>
					<view class="bagDetailContent">是否加入并切换至 新瑞工厂？</view>
					<view class="bagDetailBtn">
						<text class="bagDetailCancel" @click="CancelFactory()">取消</text>
						<text class="bagDetailConfirm" @click="joinFactory()">确定</text>
					</view>

				</view>
			</uni-popup>

		</view>



		<view>


			<!-- 点击列表弹出-->
			<uni-popup ref="popupConfirm" type="bottom">
				<view class="bagDetail">

					<view class="bagDetailTitle">操作成功</view>
					<view class="bagDetailContent">已加入并切换至 新瑞工厂</view>
					<view class="bagDetailBtn">
						<text class="bagDetailConfirmn" @click="joinFactoryDone()">确定</text>
					</view>

				</view>
			</uni-popup>

		</view>


	</view>
</template>

<script>
	import bgImage from '@/components/backgroundImage.vue'

	export default {
		components: {

			bgImage
		},
		data() {
			return {
				title: '工厂'

			}
		},

		onLoad() {
			this.open()
		},
		methods: {


			joinFactoryDone() {
				this.closepopupConfirm()
			},
			joinFactory() {
				this.openpopupConfirm()
				
				this.close()
			},
			// 打开弹框
			open() {

				this.$refs.popupBag.open('center')




			},
			CancelFactory() {
				this.close()
			},
			// 关闭弹框
			close() {
				this.$refs.popupBag.close()
			},


			// 打开弹框
			openpopupConfirm() {

				this.$refs.popupConfirm.open('center')




			},
			// 关闭弹框
			closepopupConfirm() {
				this.$refs.popupConfirm.close()
			},
		}
	}
</script>

<style>
	.bagDetailConfirm {

		width: 230rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 110rpx;


		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bagDetailCancel {

		display: flex;
		justify-content: center;
		align-items: center;

		width: 230rpx;
		height: 80rpx;
		background: #ECF5FD;
		border-radius: 20rpx;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 110rpx;
	}

	.bagDetailConfirmn {
		width: 490rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 110rpx;


		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bagDetailBtn {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		margin-top: 60rpx;
	}

	.bagDetailContent {

		width: 357rpx;
		height: 27rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		line-height: 50rpx;
		margin-top: 49rpx;
	}

	.bagDetailTitle {

		width: 142rpx;
		height: 34rpx;

		font-weight: 400;
		font-size: 36rpx;
		color: #333333;
		line-height: 30rpx;

		margin-top: 49rpx;
	}

	.bagDetail {
		width: 550rpx;
		height: 328rpx;
		background: #FFFFFF;
		border-radius: 30rpx;


		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;


	}

	.content {

		width: 559rpx;
		height: 107rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;

	}

	.title {
		margin-top: 179rpx;
		text-align: center;
		font-size: 80rpx;
		font-weight: bold;
	}
</style>